<template>
  <div class="app-container" v-loading="loading">
    <el-form
        ref="queryRef"
        :inline="true"
        :model="queryParams"
        class="form-box form-input"
    >
      <div style="display: flex;flex-wrap: wrap; width: 100%">
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.locationCode"
                clearable
                placeholder="库位编码"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.locationName"
                clearable
                placeholder="库位位置"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="状态:" style="width:200px">
            <el-select
                clearable
                placeholder="状态"
                v-model="queryParams.status"
            >
              <el-option label="全部" value=""></el-option>
              <el-option label="启用" value="0"></el-option>
              <el-option label="停用" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button icon="Search" type="primary" @click="getList">查询</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-col>

      </div>
    </el-form>
    <div>
      <el-button
          icon="Plus"
          type="primary"
          @click="handleAdd"
          v-hasPermi="['basic:location:save']"
      >新建库位
      </el-button>
      <el-button type="danger" @click="batchDelete" v-hasPermi="['basic:location:delete']">删除所选</el-button>
      <el-button type="primary" @click="printKwCode">打印库位条码</el-button>

    </div>

    <vxe-table ref="tableRef"
               style="margin-top:15px"
               :data="tableData"
               :height="tableHeight"
               align="center"
               :row-config="{isCurrent: true, isHover: true}"
               :checkbox-config="{ checkMethod:visibleMethod,trigger:'row'}"
               border
    >
      <vxe-column type="checkbox" width="80"></vxe-column>
      <vxe-column type="seq" width="80" title="序号"/>
      <vxe-column field="status" title="状态" width="100">
        <template v-slot="{row}">
          <el-tag v-if="row.status == 0">启用</el-tag>
          <el-tag v-else class="ml-2" type="danger">停用</el-tag>
        </template>
      </vxe-column>
      <vxe-column field="locationCode" width="220" title="库位编码"/>
      <vxe-column field="locationName" width="220" title="库位位置"/>
      <vxe-column field="skuCode" width="220" title="关联SKU编码"/>
      <vxe-column field="skuName" width="220" title="关联商品名称"/>
      <vxe-column field="coverUrl" width="180" title="关联商品图片">
        <template #default="{row}">
          <ImagePreview v-if="row.coverUrl" :width="150" :height="50" :src="row.coverUrl"></ImagePreview>
        </template>
      </vxe-column>
      <vxe-column field="rackNo" width="150" title="货架号"/>
      <vxe-column field="companyName"  width="150" title="公司名称" ></vxe-column>
      <vxe-column field="warehouseName" width="150" title="仓库"/>
      <vxe-column field="areaName" width="150" title="库区"/>
      <vxe-column field="maxNum" width="120" title="库存上限"/>
      <vxe-column field="maxWeight" width="120" title="最大承重"/>
      <vxe-column field="locRow" width="100" title="排"/>
      <vxe-column field="locLayer" width="100" title="层"/>
      <vxe-column field="locNo" width="100" title="号"/>
      <vxe-column field="remark" width="220" title="备注"/>
      <vxe-column fixed="right" title="操作" width="140px">
        <template #default="{row}">
          <el-button type="text" @click="clickEdit(row)" v-hasPermi="['basic:location:save']">编辑</el-button>
          <el-button type="text" style="color:green" @click="clickView(row)">查看</el-button>
          <el-button type="text" style="color:red" @click="handleDelete(row)" v-hasPermi="['basic:location:delete']">删除</el-button>
        </template>
      </vxe-column>
    </vxe-table>

    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />
    <EditStorage :isShowDialog="isShowDialog" v-if="isShowDialog" :title="title" :rowData="rowData"
                 :isView="isView" :kwId="kwId"
                 @cancel="handleClose"></EditStorage>

    <!--    打印区域-->
    <StoragePrint :isShowDialog="isShowPrint" v-if="isShowPrint" :detailData="printDataList"
                  @cancel="closePrint"></StoragePrint>

  </div>
</template>

<script setup>
import {onMounted, ref, nextTick} from "vue";
import {getLocationList, locationDelete} from "@/api/scApi";
import EditStorage from "@/views/basicData/storageLocationManagement/editStorage.vue";
import ImagePreview from "@/components/ImagePreview/index.vue";
import StoragePrint from "@/views/basicData/storageLocationManagement/storagePrint.vue";
import GoodsBarcodePrint from "@/views/commodity/commodityManagement/goodsBarcodePrint.vue";

const {proxy} = getCurrentInstance()
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
})
const tableData = ref([{}])
const rowData = ref({})
const title = ref('')
let isShowDialog = ref(false)
let isView = ref(false)
let total = ref(0)
let kwId = ref("")
let loading = ref(false)

function getList() {
  loading.value = true
  getLocationList({
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    param: queryParams.value
  }).then(res => {
    loading.value = false
    tableData.value = res.data
    total.value = res.total
  }).finally(() => {
    loading.value = false
  })
}

function resetQuery() {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
  }
  getList();
}

function handleAdd() {
  isShowDialog.value = true;
  title.value = "新增库位";
}

const tableHeight = ref(0);

onMounted(() => {
  getList()
  nextTick(() => {
    tableHeight.value = window.innerHeight - 370;
  })
  window.onresize = () => {
    tableHeight.value = document.body.scrollHeight - 370;
  }
})

// 编辑按钮
async function clickEdit(row) {
  rowData.value = row
  title.value = "编辑库位";
  isShowDialog.value = true
}

function clickView(row) {
  rowData.value = row
  title.value = "查看库位"
  isShowDialog.value = true
  isView.value = true
  kwId.value = row.locationId
}


function handleDelete(row) {
  deleteData([row.locationId])
}

//删除所选
function batchDelete() {
  const $table = proxy.$refs.tableRef
  if ($table) {
    const selectRecords = $table.getCheckboxRecords()
    let ids = selectRecords.map(item => item.locationId)
    deleteData(ids)
  }
}

function deleteData(ids) {
  if (!ids || ids.length === 0) {
    return
  }
  proxy.$modal.confirm('是否确认删除该数据？').then(() => {
    locationDelete({ids: ids}).then(res => {
      if (res.code === 200) {
        getList();
        proxy.$modal.msgSuccess("删除成功");
      }
    })
  }).catch(() => {
  });
}

function handleClose(isReload) {
  rowData.value = {}
  isShowDialog.value = false
  isView.value = false
  kwId.value = ""
  if (isReload) {
    getList()
  }
}

//是否显示复选框
function visibleMethod({row}) {
  return row.status == '0'
}

let isShowPrint = ref(false)
let printDataList = ref([])

function printKwCode() {
  const $table = proxy.$refs.tableRef
  if ($table) {

    const selectRecords = $table.getCheckboxRecords()
    if (selectRecords.length === 0) {
      proxy.$modal.msgWarning("请选择要打印的数据!")
    } else {
      printDataList.value = selectRecords
      isShowPrint.value = true
    }
  }
}

function closePrint() {
  printDataList.value = {}
  isShowPrint.value = false
}
</script>

<style lang="scss" scoped>
.container {
  padding: 15px 0 0;

  .el-form {
    display: flex;
    justify-content: space-between;
  }
}

.form-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.form-input {
  :deep(.el-form-item__content) {
    margin-right: 10px;
  }
}
</style>
